import React ,{Component} from "react"
import {View, Text, ScrollView, StyleSheet,Image,TextInput} from "react-native"
import {connect} from "react-redux";
import {Actions} from "react-native-router-flux";
import NavigationComponent from "../../components/NavigationComponent";
import Resolution from "../../tools/Resolution"
import LinearGradient from "react-native-linear-gradient";
class Login extends Component{
    constructor(props) {
        super(props);
        this.state = {
        };

    }


    render(): React.ReactNode {

        return <Resolution.FixWidthView >
            <NavigationComponent title={"商户登录"} back={"返回"}/>
            <ScrollView style={styles.container}>


                <Image style={styles.bee} source={require("../../res/img/bee.png")}/>
                <Image style={styles.suda} source={require("../../res/img/suda.png")}/>

                <View style={styles.phoneWarp}>
                    <View style={styles.locateWarp}>
                        <Text style={styles.locate}>+ 86</Text>
                    </View>
                    <View style={styles.split}/>
                    <View style={styles.inputWarp}>
                        <TextInput style={styles.input} placeholder={"手机账号"} />
                    </View>
                </View>

                <View style={styles.pwdWarp}>
                    <View style={styles.locateWarp}>
                        <Text style={styles.locate}>密码</Text>
                    </View>
                    <View style={styles.split}/>
                    <View style={styles.inputWarp}>
                        <TextInput style={styles.input} placeholder={"登录密码"} />
                    </View>
                </View>

                <View style={styles.forgetWarp}>
                    <Text style={styles.forget} onPress={Actions.ForgetPwd}>忘记密码</Text>
                    <Text style={styles.open} onPress={Actions.OpenShop}>我要开店</Text>
                </View>
                <LinearGradient colors={[ '#FFC83B','#FEA325']} end={{ x: 0, y: 0}} start={{ x: 1, y: 0}} style={styles.loginWarp}>
                    <Text onPress={Actions.HomePage} style={styles.login}>
                        登录
                    </Text>
                </LinearGradient>

            </ScrollView>


        </Resolution.FixWidthView>
    }

}

const styles = StyleSheet.create({
    container:{
        backgroundColor:"#fff",
        flex:1
    },
    bee:{
        marginRight:"auto",
        marginLeft:"auto",
        marginTop:180,
        width:170,
        height: 130
    },
    suda:{
        marginTop: 20,
        marginRight:"auto",
        marginLeft:"auto",
        height:27,
        width:146
    },
    phoneWarp:{
        marginTop:146,
        marginRight:"auto",
        marginLeft:"auto",
        height:70,
        borderBottomColor:"#E2E2E2",
        borderBottomWidth:1,
        flexDirection:"row",
        width:525,
    },
    pwdWarp:{
        marginTop:31,
        marginRight:"auto",
        marginLeft:"auto",
        height:70,
        borderBottomColor:"#E2E2E2",
        borderBottomWidth:1,
        flexDirection:"row",
        width:525,
    },
    locateWarp:{
        width:96,

    },
    split:{
      width:2,
      height:30,
      backgroundColor: "#e2e2e2",
      marginTop:19
    },
    locate:{

        lineHeight:70,
        fontSize:32,
        textAlign:"center"
    },
    inputWarp:{
        paddingLeft:14,
        width:400,
    },
    input:{
        lineHeight:70,
        fontSize:32,

    },
    forgetWarp:{
        flexDirection:"row",
        marginRight:"auto",
        marginLeft:"auto",
        width:525,
        marginTop:46,
        justifyContent:"space-between"
    },
    forget:{
       color:"#EFB81B",
       fontSize:23,
    },
    open:{
        color:"#222",
        fontSize:23,
    },
    loginWarp:{
        marginTop:114,
        marginLeft:"auto",
        marginRight:"auto",
        borderRadius:39,

    },
    login:{
        height:78,
        width:498,
        fontSize:30,
        color:"#fefefe",
        lineHeight:78,
        textAlign: "center",

    }

});



export default connect(
    (state) => {
        return {
        }
    },
    (dispatch) => ({

    })
)(Login)
